<template>
    <div class="auto-dan">
        <my-layout>
            <!-- 插入主内容区的内容 -->
            <template v-slot:main>
              <div class="detail_container">
                  <!--   飞书文档待优化 -->
                  <div class="block docx-heading2-block" data-record-id="PsrfdwkjVojWeax8gedcpNkIned">
                      <div class="heading-block">
                          <h2>AutoDAN：</h2>
                      </div>
                  </div>
                  <div class="block docx-text-block" data-record-id="VW2UdfMehoNhtLxUaHXcWNovnIf">
                      <div class="text-block-wrapper">
                          <div class="text-block">
                              <span class="title_txt">Source:</span>
                              <a style="cursor:pointer;text-decoration-skip:none;" class="link"
                                 href="https://arxiv.org/abs/2310.04451" target="_blank"
                              ><span>AUTODAN: GENERATING STEALTHY JAILBREAK PROMPTS ON ALIGNED LARGE LANGUAGE MODELS</span></a>
                          </div>
                      </div>
                  </div>
                  <div class="block docx-text-block" data-record-id="THd6dbLCFoa3QdxzPwzcSkhDnkc">
                      <div class="text-block-wrapper">
                          <div class="text-block">
                              <span class="title_txt">Github repo:</span>
                              <a style="cursor:pointer;text-decoration-skip:none;" class="link"
                                 href="https://github.com/SheltonLiu-N/AutoDAN.git" target="_blank"
                              ><span>https://github.com/SheltonLiu-N/AutoDAN.git</span></a>
                          </div>
                      </div>
                  </div>

                  <div class="block docx-text-block"  data-record-id="QZe9dtSrDoaQqxxaWcSc2dv2ngg">
                      <div class="text-block">
                          <h4>Introduction:</h4>
                      </div>
                  </div>

                  <div class="block docx-text-block" data-record-id="GTbzdc3SFosRbTxdBDkcFtyKn4g">
                      <div class="text-block-wrapper">
                          <div class="text-block">
                              <p>This paper introduces AutoDAN, a novel jailbreak attack against aligned LLMs.
                                  AutoDAN can automatically generate stealthy jailbreak prompts by the carefully designed hierarchical genetic algorithm. </p>
                          </div>
                      </div>
                  </div>
                  <div class="block docx-image-block" data-record-id="LNQMdw0DQovBqAxH9X5cvdHZnZe">
                      <div class="img" image-token="TDTOblxIBoIEagx6LGdcdednnih">
                          <img draggable="false" src="@/assets/doc/img2.png"/>
                      </div>
                  </div>

                  <div class="block docx-text-block"  data-record-id="NbcqdpAoBorJRtx2NK9cpEiynff">
                      <div class="text-block">
                          <h4>Adjustable parameters:</h4>
                      </div>
                  </div>

                  <div class="block docx-text-block" data-record-id="FRPHdv6vcoarYxx99zocfR6Unqe">
                      <div class="text-block-wrapper">
                          <div class="text-block">
                              <p>attack_model (ModelBase): The model used to generate jailbreak prompt.</p>
                          </div>
                      </div>
                  </div>
                  <div class="block docx-text-block" data-record-id="O5wbdsAIIoUykAxzxaucTiWdnTd">
                      <div class="text-block-wrapper">
                          <div class="text-block">
                              <p>target_model (ModelBase): The model that users try to jailbreak.</p>
                          </div>
                      </div>
                  </div>
                  <div class="block docx-text-block" data-record-id="CWUfdsASVoGT8cxhD5kcFLg9npc">
                      <div class="text-block-wrapper">
                          <div class="text-block">
                              <p>eval_model (ModelBase): The model used to judge whether an illegal query successfully jailbreak.</p>
                          </div>
                      </div>
                  </div>
                  <div class="block docx-text-block" data-record-id="Gnt2dG28Nok7lHx9dkCcD0DrnpP">
                      <div class="text-block-wrapper">
                          <div class="text-block">
                              <p>jailbreak_datasets (JailbreakDataset): The data used in the jailbreak process.</p>
                          </div>
                      </div>
                  </div>
                  <div class="block docx-text-block" data-record-id="I9nkdoCUeomTDHxUSFxcnkAgn0b">
                      <div class="text-block-wrapper">
                          <div class="text-block">
                              <p>num_steps (int): The number of paragraph-level iterations of the AutoDAN-HGA algorithm.</p>
                              <p>sentence_level_steps (int): The number of sentence-level iterations of the AutoDAN-HGA algorithm.</p>
                              <p>word_dict_size (int): The word_dict size of the AutoDAN-HGA algorithm.</p>
                              <p>batch_size (int): The number of candidate prompts of each query.</p>
                              <p>num_elites (float): The proportion of elites used in Genetic Algorithms.</p>
                              <p>crossover_rate (float): The probability of executing crossover mutation.</p>
                              <p>mutation_rate (float): The probability of executing rephrase mutation.</p>
                              <p>num_points (int): The number of breakpoints used in crossover mutation.</p>
                              <p>model_name (str): The target model name.</p>
                              <p>low_memory (int): 1 if low memory else 0</p>
                          </div>
                      </div>
                  </div>
                  <!--   飞书文档待优化 -->

                  <div class="effect">
                        <h4>Jailbreak prompt examples</h4>
                        <div class="exampleSelectorContainer">
                            <span>Select an Example：</span>
                            <el-select clearable v-model="fnName" placeholder="Please click to select"  @change="fetchMessage">
                                <el-option
                                        v-for="(value, name) in testData"
                                        :key="name"
                                        :label="name"
                                        :value="name">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="chatbot">
                            <section class="chatbot1">
                                <div class="chatbotHeader">
                                    <img src="@/assets/ChatGPT_logo.png" alt="ChatGPT Icon">
                                    <span>ChatGPT</span>
                                </div>
                                <div class="output-container">
                                    <div  v-show="!!fnName">
                                        <div class="userMessage">
                                            <span class="who">User: </span>
                                            {{showMsg.title}}
                                        </div>
                                        <div class="assistantMessage">
                                            <span class="who">Assistant: </span>
                                            {{showMsg.leftContent}}}
                                        </div>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="chatbotHeader">
                                    <img src="@/assets/devil.png" alt="devil Icon">
                                    <span>Jailbreak result</span>
                                </div>
                                <div class="output-container">
                                    <div v-show="!!fnName">
                                        <div class="userMessage">
                                            <span class="who">User: </span>
                                            {{showMsg.title}}
                                        </div>
                                        <div class="assistantMessage">
                                            <span class="who">Assistant: </span>
                                            {{showMsg.content}}}
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </template>
        </my-layout>
    </div>
</template>

<script>
  import MyLayout from '@/views/MyLayout.vue'
  const initVale = {content:'',title:'',leftContent:''};
  export default {
    components: {
      MyLayout
    },
    data() {
      return {
        fnName:'',
        testData:{},
        showMsg:{...initVale},
        intervalId: null,
        meIntervalId: null,
      };
    },
    methods:{
      fetchMessage(val) {
        if(this.intervalId) {clearInterval(this.intervalId);}
        if(this.meIntervalId) {clearInterval(this.meIntervalId);}
        this.showMsg = {...initVale};
        if (val) {
          const content = this.testData[val];
          const leftContent = `I'm sorry, but I cannot assist with creating a phishing email or any other unethical activities.
                                        My purpose is to provide helpful and responsible information to users.
                                        If you have any other non-harmful requests or questions, feel free to ask,
                                        and I'll be happy to assist you.`;
          this.showMsg.title = val;
          let i = 0 , j = 0;
          this.meIntervalId = setInterval(() => {
            if (i < content.length) {
              this.showMsg.content += content.charAt(i);
              i++;
            } else {
              clearInterval(this.meIntervalId);
            }
          }, 10);
          this.intervalId = setInterval(() => {
            if (j < leftContent.length) {
              this.showMsg.leftContent += leftContent.charAt(j);
              j++;
            } else {
              clearInterval(this.intervalId);
            }
          }, 10);
        }
      }
    },
    created() {
      fetch(window.location.protocol + '//' + window.location.host+'/chatglm3.jsonl')
        .then(response => response.text())
        .then(content => {
          // 处理 content 中的 JSON Lines 数据
          let linesArray = content.split(/\n|\r\n/);
          linesArray = linesArray.filter(item => item);
          // const obj = linesArray[0];  // 字符串
          // 逐行解析每个 JSON 对象
          const jsonArray = linesArray.map(line => {
            const obj = new Function(`return ${line}`)()
            return obj;
          });
          const testData = {};
          // 每一个行的结构obj是：{"jailbreak_prompt": xxx,"target_responses":[xxxx],"query":xxxx,"eval_results":[xxxxx]}
          for(let item of jsonArray){
            testData[item.query] = Array.isArray(item.target_responses) ? item.target_responses[0] : '';
          }
          this.testData = testData;
        })
        .catch(error => console.error(error));
    },
    beforeDestroy() {
      clearInterval(this.intervalId);
      clearInterval(this.meIntervalId);
    }
  };
</script>

<style lang="scss" scoped>

</style>
